<style lang="less">

</style>
<template>
    <Modal
        v-model="drawer.show" transfer
        :title="lang.new"
        :width="width"
        class-name="cm-modal-resize"
        :z-index="zIndex"
        :draggable="true"
        :closable="true"
        :mask-closable="false"
        @on-ok="ok">
        <span slot="header" :style="titleStyle">{{lang.new }}</span>
        <div v-if="drawer.show" class="cm-modal-content">
           <cfgForm :cols="cols" :rules="rules" :columns="columns" ref="_frm" :data="data.values"></cfgForm>
           <div v-show="data.values.itemType=='单选'||data.values.itemType=='多选'">
            <starGrid :row="'40px'" :column="'auto 150px 34px 34px'" :area="'a b c d'" style="border:none;" v-for="(item,index) in paramData" :key="index">
               <Input v-model="item.codeName" style="grid-area: a" placeholder="参数名称"></Input>
               <starSelect v-model="item.isPass" style="grid-area: b" :options="operator" transfer placeholder="是否通过"></starSelect>
               <Button icon="ios-add" style="grid-area: c" @click="addFilter()"></Button>
               <Button icon="ios-remove" style="grid-area: d" @click="removeFilter(index)"></Button>
            </starGrid>
            <starGrid :row="'40px'" :column="'auto 150px 34px 34px'" :area="'a b c d'" style="border:none;">
               <Input v-model="paramsTpl.codeName" style="grid-area: a" placeholder="参数名称"></Input>
               <starSelect v-model="paramsTpl.isPass" style="grid-area: b" :options="operator" transfer placeholder="是否通过"></starSelect>
               <Button icon="ios-add" style="grid-area: c" @click="addFilter()"></Button>
            </starGrid>
           </div>
        </div>
        <template slot="footer">
            <!-- 对于具有验证，点击提交不能消失的对话框，必须使用这种插槽的用法 -->
            <Button type="text" @click="drawer.show=false">{{lang.cancel}}</Button>
            <Button type="primary" @click="ok">{{lang.save}}</Button>
      </template>
    </Modal>
</template>
<script>
    export default {
        data () {
            return {
                data: {},
                // 参数项列表数据
                paramData: [],
                operator: [{ label: '是', value: '1' }, { label: '否', value: '0' }],
                paramsTpl: {
                    codeName: '',
                    isPass: ''
                },
                basicTpl: [{
                    id: this.tools.uuid(8),
                    name: this.tools.uuid(8),
                    pointer: {},
                    values: { params: [] }
                }]
            }
        },
        props: {
            modelType: {
                default: () => {
                    return 'entity';
                }
            },
            width: {
                default: () => {
                    return 1024;
                }
            },
            zIndex: {
                default: () => {
                    return 100;
                }
            },
            titleStyle: {
                default: () => {
                    return {}
                }
            },
            drawer: {
                default: () => {
                    return {
                        show: false
                    };
                }
            },
            columns: {
                default: () => {
                    return [];
                }
            },
            cols: {
                default: () => {
                    return 2;
                }
            },
            rules: {
                default: () => {
                    return {};
                }
            }
        },
        computed: {
            labelWidth () {
                return 100;
            },
            labelPosition () {
                return 'right';
            },
            lang () {
                return {
                    'en-US': {
                        edit: 'edit',
                        new: 'new',
                        detail: 'detail',
                        action: 'action',
                        submit: 'submit',
                        cancel: 'cancel',
                        save: 'save'
                    },
                    'zh-CN': {
                        edit: '编辑',
                        new: '添加',
                        detail: '查看',
                        action: '操作',
                        submit: '提交',
                        cancel: '取消',
                        save: '确定'
                    }
                }[this.G_Locale]
            }
        },
        watch: {
            'drawer.show': function () {
                if (this.drawer.show) {
                    this.data = this.$modelObject.getTpl(this.modelType);
                    this.paramData = this.tools.lodash.cloneDeep(this.basicTpl[0].values.params)
                }
            },
            'data.values.itemType': {
                handler (type) {
                    this.$emit('changeItemType', type)
                },
                deep: true
            }
        },
        beforeMount () {
            this.data = this.$modelObject.getTpl(this.modelType);
        },
        methods: {
            /**
             * 提交添加或修改数据
             */
            ok () {
                this.loading = true;
                this.$refs._frm.$refs.form.validate(valid => {
                    if (valid) {
                        let data = this.tools.lodash.cloneDeep(this.data)
                        if (this.paramData.length > 0) {
                            let basicData = this.tools.lodash.cloneDeep(this.basicTpl)
                            basicData[0].values.params = this.paramData
                            this.$set(data.hier, 'basic', basicData)
                        }
                        this.$emit('submit', data);
                    }
                });
            },
            addFilter () {
                this.paramData.push(this.tools.lodash.cloneDeep(this.paramsTpl))
                this.paramsTpl = { codeName: '', isPass: '' }
            },
            removeFilter (index) {
                this.paramData.splice(index, 1)
            }
        }
    }
</script>
